<template>
  <ul class="list">
    <li
      class="item"
      v-for="item of letters"
      :key="item"
      :ref="item"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
    >
      {{item}}
    </li>
  </ul>
</template>

<script>
    export default {
      name: "CityAlphabet",
      props:{
          cities:Object
      },
      data(){
        return{
          //定义touchstart move end执行的先后顺序
          touchStatus:false,
          startY:0,
          timer:null //节流限制频率
        }
      },
      updated(){
        this.startY = this.$refs['A'][0].offsetTop
      },
      computed:{
        letters(){
          const letters = []
          for(let i in this.cities){
            letters.push(i)
          }
          return letters
        }
      },
      methods:{
        handleLetterClick(e){
          this.$emit('change',e.target.innerText) //向外触发事件,事件名字change,事件携带的内容e.target.innerText
        },
        handleTouchStart(){
          this.touchStatus = true
        },
        handleTouchMove(e){
          if(this.touchStatus){
            if(this.timer){
              clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
              const startY = this.$refs['A'][0].offsetTop
              const touchY = e.touches[0].clientY -79
              const index = Math.floor((touchY - this.startY) / 20) //Math.floor取整
              if(index >= 0 && index < this.letters.length){
                this.$emit('change',this.letters[index])
              }
            },16)

          }
        },
        handleTouchEnd(){
          this.touchStatus = false
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
.list
  display :flex
  flex-direction :column
  justify-content:center
  position :absolute
  top:1.58rem
  bottom:0
  right:0
  width:.4rem
  .item
    text-align:center
    line-height:.4rem
    color:$bgColor
</style>
